<template>
  <div>
    <a-modal v-model:visible="visible" :footer="false" width="80%">
      <ma-crud :options="crud" :columns="columns" ref="crudRef">
        <template #mini_qrcode="{ record }">
          <a-image :src="record.mini_qrcode ? $tool.showFile(record.mini_qrcode):''" height="80" />
        </template>
      </ma-crud>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import api from '@/api/prm/member_channel.js'
import {Message} from "@arco-design/web-vue";

const visible = ref(false)
const crudRef = ref()
const memberInfo = ref({})

const open = (record) => {
  memberInfo.value = record
  visible.value = true
  crudRef.value.requestData()
}

const crud = reactive({
  autoRequest: false,
  api: api.list,
  showIndex: false,
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationColumnWidth: 180,
  add: {show: true, api: api.add},
  edit: {show: false, api: api.update},
  delete: {show: true, api: api.delete},
  formOption: {viewType: 'modal', width: 800},
  beforeRequest: (params) => {
    params.member_id = memberInfo.value.id
  },
  beforeAdd: (params) => {
    params.member_id = memberInfo.value.id
    return true;
  }
})

const columns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true},
  {
    title: '渠道名称', dataIndex: 'channel_id', search: true, width: 80,
    formType: 'select', dict: { url: 'prm/channel/allList', props: { label: 'name', value: 'id' }, translation: true,pageSize:50,openPage:false },
  },

  {title: '渠道标识', dataIndex: 'channel_code', addDisplay: false, editDisplay: false},
  {title: '小程序码', dataIndex: 'mini_qrcode', addDisplay: false, editDisplay: false},
  {title: '备注', dataIndex: 'remark'},
  {title: '创建时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false, search: false},
])

defineExpose({ open })

</script>
